<template>
  <div class="member">
    <el-bread></el-bread>

    <el-table
      :data="memberList"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="id" label="用户编号" width="180">
      </el-table-column>
      <el-table-column prop="nickname" label="昵称" width="180">
      </el-table-column>
      <el-table-column prop="phone" label="手机号" width="180">
      </el-table-column>
      <el-table-column label="状态">
        <template v-slot="a">
          <el-tag v-if="a.row.status == 1" type="success">启用</el-tag>
          <el-tag v-else type="warning">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="a">
          <el-button size="small" type="primary" @click="infoShow(a.row.uid)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @current-change="changePage"
      background
      layout="prev, pager, next"
      :total="memberCount"
      :page-size="pageData.size"
    >
    </el-pagination>

    <v-dialog ref="dialog" :pageData="pageData" />
  </div>
</template>
<script>
import vDialog from "./member-dialog.vue";
import { mapState, mapActions } from "vuex";
export default {
  components: {
    vDialog,
  },
  data() {
    return {
      pageData: {
        size: 2,
        page: 1,
      },
    };
  },
  mounted() {
    this.getMemberList(this.pageData);
    this.getMemberCount();
  },
  computed: {
    ...mapState("member", ["memberList", "memberCount"]),
  },
  methods: {
    ...mapActions("member", ["getMemberList", "getMemberCount"]),
    showAdd() {
      this.$refs.dialog.isshow = true;
    },
    changePage(e) {
      this.pageData.page = e;
      this.getMemberList(this.pageData);
    },
    infoShow(uid) {
      this.$refs.dialog.getInfo(uid);
    },
  },
};
</script>

<style scoped>
.el-breadcrumb {
  margin: 20px 0;
}
</style>